<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		
		<style type="text/css">
			
			*{
				font-size: 20px;
				margin: 0;
				padding: 0;
			}
		
			/*空格 后代选择器*/
			/*div span{
				color: red;
			}
			*/
			
			/*> 子代选择器*/
			div>span{
				color: red;
			}
			
			div ~ p{
				color: blue;
			}
			
			
		</style>
	</head>
	<body>
		<h2>层级选择器的使用</h2>
		
		<p>
			xxxxx
		</p>
		
		<div>
			<span>span1</span>
			<ul>
				<li><span>苹果</span></li>
			</ul>
		</div>	
		
		<p>
			我爱java
			<span>span2</span>	
		</p>
		
		<p>
			我爱故乡
			<span>span2</span>	
		</p>
		
	</body>
</html>
